<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生鲜超市 - 订单系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 顶部快捷导航 */
        .shortcut {
            background-color: #f2f2f2;
            padding: 8px 0;
            font-size: 12px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .shortcut .wrapper {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
        }
        
        .shortcut ul {
            display: flex;
            list-style: none;
            gap: 15px;
        }
        
        .shortcut a {
            color: #666;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .shortcut a:hover {
            color: #e4393c;
        }
        
        /* 搜索区域 */
        .search {
            max-width: 1200px;
            margin: 20px auto;
            display: flex;
            align-items: center;
            padding: 0 15px;
            position: relative;
        }
        
        .search-icon {
            position: absolute;
            left: 30px;
            color: #999;
            font-size: 18px;
        }
        
        .search input {
            width: 100%;
            height: 50px;
            border: 2px solid #e4393c;
            border-radius: 30px;
            padding: 0 20px 0 50px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s;
        }
        
        .search input:focus {
            box-shadow: 0 0 10px rgba(228, 57, 60, 0.3);
        }
        
        .search input::placeholder {
            color: #bbb;
        }
        
        .cart-wrapper {
            position: absolute;
            right: 30px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .cart-wrapper .car {
            font-size: 26px;
            color: #666;
            position: relative;
        }
        
        .cart-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #e4393c;
            color: white;
            font-size: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Banner区域 - 轮播图样式 */
        .banner {
            max-width: 1200px;
            margin: 20px auto;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            height: 300px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .banner-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .banner-slides {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }
        
        .banner-slide {
            flex: 0 0 100%;
            position: relative;
            height: 100%;
            overflow: hidden;
        }
        
        .banner-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 10%;
            color: white;
        }
        
        .slide-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        
        .slide-subtitle {
            font-size: 18px;
            max-width: 500px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .banner-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 10;
        }
        
        .banner-btn {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin: 0 20px;
            transition: all 0.3s;
            color: white;
            font-size: 20px;
        }
        
        .banner-btn:hover {
            background: rgba(255,255,255,0.4);
            transform: scale(1.1);
        }
        
        .banner-indicators {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 10px;
            z-index: 10;
        }
        
        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .indicator.active {
            background: #fff;
            transform: scale(1.2);
        }
        
        /* 生鲜区域 */
        .shengxian {
            max-width: 1200px;
            margin: 40px auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 0 20px 30px;
        }
        
        .hd {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 0 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .hd h2 {
            font-size: 24px;
            color: #333;
            font-weight: bold;
            position: relative;
            padding-left: 15px;
        }
        
        .hd h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: #e4393c;
            border-radius: 2px;
        }
        
        .more {
            color: #999;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
            display: flex;
            align-items: center;
        }
        
        .more:hover {
            color: #e4393c;
        }
        
        .more::after {
            content: '>';
            margin-left: 5px;
            font-size: 12px;
        }
        
        .category-nav {
            display: flex;
            gap: 25px;
            list-style: none;
        }
        
        .category-nav li a {
            color: #666;
            text-decoration: none;
            font-size: 16px;
            padding: 5px 0;
            position: relative;
            transition: color 0.3s;
        }
        
        .category-nav li a:hover {
            color: #e4393c;
        }
        
        .category-nav li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #e4393c;
            transition: width 0.3s;
        }
        
        .category-nav li a:hover::after {
            width: 100%;
        }
        
        /* 商品网格 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .product-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            position: relative;
            border: 1px solid #f0f0f0;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-color: #ffece8;
        }
        
        .product-card a {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        
        .product-img {
            height: 200px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s; /* 添加变换过渡效果 */
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.05);  /* 鼠标悬停时放大5% */
        }
        
        .product-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #e4393c;
            color: white;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 3px;
            z-index: 2;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-info p {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .product-name {
            font-weight: bold;
            font-size: 16px;
            color: #333;
            height: 44px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .product-desc {
            font-size: 13px;
            color: #999;
        }
        
        .product-category {
            font-size: 12px;
            color: #e4393c;
            background: #ffefee;
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .product-price {
            color: #e4393c;
            font-weight: bold;
            font-size: 18px;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .product-price span {
            font-size: 22px;
        }
        
        /* 新添加的按钮样式 */
        .add-to-order {
            background: #e4393c;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .add-to-order:hover {
            background: #c62b2e;
        }
        
        .add-to-order i {
            margin-right: 5px;
        }
        
        /* 购物车弹窗 */
        .cart-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .cart-content {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }
        
        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
        }
        
        .cart-header h2 {
            font-size: 20px;
            color: #333;
        }
        
        .close-cart {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
        }
        
        .cart-items {
            margin-bottom: 20px;
        }
        
        .cart-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .cart-item-img {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .cart-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .cart-item-info {
            flex: 1;
        }
        
        .cart-item-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .cart-item-price {
            color: #e4393c;
            font-weight: bold;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        
        .quantity-btn {
            width: 28px;
            height: 28px;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 40px;
            height: 28px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 5px;
        }
        
        .remove-item {
            color: #999;
            background: none;
            border: none;
            cursor: pointer;
            margin-left: 10px;
        }
        
        .cart-footer {
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .cart-total {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .cart-total span:last-child {
            color: #e4393c;
        }
        
        .cart-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .cart-btn {
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .continue-shopping {
            background: #f5f5f5;
            border: 1px solid #ddd;
            color: #666;
        }
        
        .continue-shopping:hover {
            background: #eee;
        }
        
        .checkout {
            background: #e4393c;
            color: white;
            border: none;
        }
        
        .checkout:hover {
            background: #c62b2e;
        }
        
        /* 订单页面样式 */
        .order-container {
            max-width: 1200px;
            margin: 40px auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 20px;
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .order-header h1 {
            font-size: 28px;
            color: #333;
            font-weight: bold;
            position: relative;
            padding-left: 15px;
        }
        
        .order-header h1::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 24px;
            background: #e4393c;
            border-radius: 3px;
        }
        
        .back-to-home {
            color: #e4393c;
            text-decoration: none;
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        
        .back-to-home i {
            margin-right: 5px;
        }
        
        .order-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .order-card {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .order-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .order-summary {
            background: #f9f9f9;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .order-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .order-id {
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }
        
        .order-date {
            color: #666;
            font-size: 14px;
        }
        
        .order-status {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        .status-pending {
            background: #ffe0b2;
            color: #f57c00;
        }
        
        .status-completed {
            background: #c8e6c9;
            color: #388e3c;
        }
        
        .order-details {
            padding: 15px;
        }
        
        .order-items {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .order-item {
            display: flex;
            align-items: center;
            width: calc(50% - 15px);
            border: 1px solid #f0f0f0;
            border-radius: 6px;
            padding: 10px;
        }
        
        .order-item-img {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 10px;
        }
        
        .order-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .order-item-info {
            flex: 1;
        }
        
        .order-item-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .order-item-price {
            color: #e4393c;
            font-weight: bold;
        }
        
        .order-total {
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
            font-weight: bold;
            border-top: 1px solid #eee;
            padding-top: 15px;
            margin-top: 15px;
        }
        
        .order-total span:last-child {
            color: #e4393c;
            margin-left: 10px;
        }
        
        /* 结算页面样式 */
        .checkout-form {
            max-width: 800px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .form-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .form-section h2 {
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #333;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        .form-group input, 
        .form-group textarea, 
        .form-group select {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        .form-group input:focus, 
        .form-group textarea:focus, 
        .form-group select:focus {
            border-color: #e4393c;
            outline: none;
        }
        
        .form-group textarea {
            height: 100px;
            resize: vertical;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .submit-btn {
            background: #e4393c;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            width: 100%;
            transition: background 0.3s;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            background: #c62b2e;
        }
        
        .empty-cart-message {
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 18px;
        }
        
        .empty-cart-message i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .category-nav {
                display: none;
            }
            
            .hd {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .banner {
                height: 250px;
            }
            
            .slide-title {
                font-size: 24px;
            }
            
            .slide-subtitle {
                font-size: 16px;
            }
            
            .banner-btn {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
            
            .cart-content {
                width: 95%;
                padding: 15px;
            }
            
            .checkout-form {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .order-item {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .products-grid {
                grid-template-columns: 1fr;
            }
            
            .search {
                margin: 10px auto;
            }
            
            .search input {
                height: 42px;
                font-size: 14px;
            }
            
            .banner {
                height: 200px;
            }
            
            .slide-title {
                font-size: 20px;
            }
            
            .slide-subtitle {
                font-size: 14px;
                max-width: 300px;
            }
            
            .banner-btn {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
            
            .add-to-order {
                padding: 6px 10px;
                font-size: 13px;
            }
            
            .cart-actions {
                flex-direction: column;
                gap: 10px;
            }
            
            .cart-btn {
                width: 100%;
            }
        }
        .product-detail-page {
            display: none;
            max-width: 1200px;
            margin: 40px auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            padding: 30px;
        }
        
        .product-detail-container {
            display: flex;
            gap: 40px;
        }
        
        .product-detail-image {
            flex: 1;
            max-width: 500px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .product-detail-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .product-detail-info {
            flex: 1;
            padding: 20px 0;
        }
        
        .product-detail-name {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .product-detail-desc {
            font-size: 16px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 25px;
        }
        
        .product-detail-price {
            font-size: 32px;
            color: #e4393c;
            font-weight: bold;
            margin-bottom: 30px;
        }
        
        .product-detail-meta {
            margin-bottom: 30px;
        }
        
        .product-detail-meta p {
            margin-bottom: 10px;
            font-size: 15px;
            color: #666;
        }
        
        .product-detail-meta .meta-label {
            display: inline-block;
            width: 80px;
            color: #999;
        }
        
        .back-to-products {
            background: #f5f5f5;
            border: 1px solid #ddd;
            color: #666;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            margin-top: 20px;
        }
        
        .back-to-products:hover {
            background: #eee;
        }
        
        .back-to-products i {
            margin-right: 8px;
        }
        
        /* 响应式调整 */
        @media (max-width: 900px) {
            .product-detail-container {
                flex-direction: column;
            }
            
            .product-detail-image {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="登录.html"><i class="fas fa-file-alt"></i> 请先登录</a></li>
                <li><a href="注册.html"><i class="fas fa-file-alt"></i> 免费注册</a></li>
                <li><a href="#" id="myOrdersLink"><i class="fas fa-file-alt"></i> 我的订单</a></li>
            </ul>
        </div>
    </div>
    
    <div class="search">
        <div class="iconfont icon-fangdajing search-icon"><i class="fas fa-search"></i></div>
        <input type="text" placeholder="搜一搜 马俊 23215220125">
        <div class="cart-wrapper" id="cartIcon">
            <div class="car">
                <i class="fas fa-shopping-cart"></i>
                <div class="cart-badge">0</div>
            </div>
        </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div id="mainContent">
        <!-- banner 轮播图 -->
        <div class="banner">
            <div class="banner-container">
                <div class="banner-slides">
                    <!-- 轮播图1 -->
                    <div class="banner-slide">
                        <img src="image\轮播图1.jpg" alt="新鲜水果">
                        <div class="slide-overlay">
                            <h2 class="slide-title">每日新鲜 · 品质生鲜</h2>
                            <p class="slide-subtitle">精选全球优质水果，产地直供，新鲜送达</p>
                        </div>
                    </div>
                    
                    <!-- 轮播图2 -->
                    <div class="banner-slide">
                        <img src="image\轮播图1.jpg" alt="精选海鲜">
                        <div class="slide-overlay">
                            <h2 class="slide-title">深海珍馐 · 鲜美无比</h2>
                            <p class="slide-subtitle">来自纯净海域的海鲜，锁住最原始的鲜美滋味</p>
                        </div>
                    </div>
                    
                    <!-- 轮播图3 -->
                    <div class="banner-slide">
                        <img src="image\轮播图1.jpg" alt="有机蔬菜">
                        <div class="slide-overlay">
                            <h2 class="slide-title">有机蔬菜 · 健康之源</h2>
                            <p class="slide-subtitle">当季采摘有机蔬菜，无农药残留，吃得安心</p>
                        </div>
                    </div>
                </div>
                
                <!-- 轮播控制按钮 -->
                <div class="banner-controls">
                    <button class="banner-btn prev-btn">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="banner-btn next-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                
                <!-- 轮播指示器 -->
                <div class="banner-indicators">
                    <div class="indicator active" data-index="0"></div>
                    <div class="indicator" data-index="1"></div>
                    <div class="indicator" data-index="2"></div>
                </div>
            </div>
        </div>
        
        <!-- 生鲜 -->
        <div class="shengxian">
            <div class="hd">
                <h2>生鲜</h2>
                <ul class="category-nav">
                    <li><a href="#">水果</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">海鲜水产</a></li>
                </ul>
                <a href="#" class="more">查看全部</a>
            </div>
            
            <div class="products-grid">
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_1.jpg" alt="美威 智利原味三文鱼排">
                            <div class="product-tag">热卖</div>
                        </div>
                        <div class="product-info">
                            <p class="product-name">美威 智利原味三文鱼排 240g/袋 4片装</p>
                            <p class="product-desc">源自智利纯净海域，肉质鲜美</p>
                            <span class="product-category">海鲜年货</span>
                            <div class="product-price">
                                ￥<span>59</span>
                                <button class="add-to-order" data-id="1" data-name="美威 智利原味三文鱼排" data-price="59" data-image="image/fresh_goods_1.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_2.jpg" alt="红功夫 麻辣小龙虾">
                            <div class="product-tag">新品</div>
                        </div>
                        <div class="product-info">
                            <p class="product-name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
                            <p class="product-desc">地道川味，麻辣鲜香</p>
                            <span class="product-category">火锅食材</span>
                            <div class="product-price">
                                ￥<span>79</span>
                                <button class="add-to-order" data-id="2" data-name="红功夫 麻辣小龙虾" data-price="79" data-image="image/fresh_goods_2.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_3.jpg" alt="三都港 冷冻黄花鱼">
                        </div>
                        <div class="product-info">
                            <p class="product-name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
                            <p class="product-desc">深海捕捞，肉质细嫩</p>
                            <span class="product-category">海鲜水产</span>
                            <div class="product-price">
                                ￥<span>49</span>
                                <button class="add-to-order" data-id="3" data-name="三都港 冷冻黄花鱼" data-price="49" data-image="image/fresh_goods_3.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_4.jpg" alt="渔公码头 大连海参">
                            <div class="product-tag">特惠</div>
                        </div>
                        <div class="product-info">
                            <p class="product-name">渔公码头 大连鲜食入味即食海参 辽参刺参</p>
                            <p class="product-desc">精选辽参，即食方便</p>
                            <span class="product-category">调味海产</span>
                            <div class="product-price">
                                ￥<span>859</span>
                                <button class="add-to-order" data-id="4" data-name="渔公码头 大连海参" data-price="859" data-image="image/fresh_goods_4.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_5.jpg" alt="越南白心火龙果">
                            <div class="product-tag">促销</div>
                        </div>
                        <div class="product-info">
                            <p class="product-name">越南白心火龙果4个装 标准果400-550g</p>
                            <p class="product-desc">热带水果，清甜多汁</p>
                            <span class="product-category">新鲜水果</span>
                            <div class="product-price">
                                ￥<span>20</span>
                                <button class="add-to-order" data-id="5" data-name="越南白心火龙果" data-price="20" data-image="image/fresh_goods_5.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_6.jpg" alt="广西沃柑">
                        </div>
                        <div class="product-info">
                            <p class="product-name">广西沃柑 新鲜水果柑橘1.5kg</p>
                            <p class="product-desc">皮薄肉厚，酸甜可口</p>
                            <span class="product-category">新鲜水果</span>
                            <div class="product-price">
                                ￥<span>20</span>
                                <button class="add-to-order" data-id="6" data-name="广西沃柑" data-price="20" data-image="image/fresh_goods_6.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_7.jpg" alt="进口牛油果">
                            <div class="product-tag">新品</div>
                        </div>
                        <div class="product-info">
                            <p class="product-name">进口 牛油果 6个装 单果重约130-180g</p>
                            <p class="product-desc">营养丰富，健康之选</p>
                            <span class="product-category">新鲜水果</span>
                            <div class="product-price">
                                ￥<span>50</span>
                                <button class="add-to-order" data-id="7" data-name="进口牛油果" data-price="50" data-image="image/fresh_goods_7.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
                
                <div class="product-card">
                    <a href="#">
                        <div class="product-img">
                            <img src="image\fresh_goods_8.jpg" alt="泰国山竹">
                        </div>
                        <div class="product-info">
                            <p class="product-name">泰国进口山竹5A级 240g/袋 4片装</p>
                            <p class="product-desc">果肉洁白，口感清甜</p>
                            <span class="product-category">进口水果</span>
                            <div class="product-price">
                                ￥<span>59</span>
                                <button class="add-to-order" data-id="8" data-name="泰国山竹" data-price="59" data-image="image/fresh_goods_8.jpg">
                                    <i class="fas fa-cart-plus"></i> 加入订单
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 购物车弹窗 -->
    <div class="cart-modal" id="cartModal">
        <div class="cart-content">
            <div class="cart-header">
                <h2>我的购物车</h2>
                <button class="close-cart" id="closeCart">&times;</button>
            </div>
            <div class="cart-items" id="cartItems">
                <!-- 购物车商品将在这里动态生成 -->
            </div>
            <div class="cart-footer">
                <div class="cart-total">
                    <span>总计:</span>
                    <span id="cartTotal">￥0.00</span>
                </div>
                <div class="cart-actions">
                    <button class="cart-btn continue-shopping" id="continueShopping">继续购物</button>
                    <button class="cart-btn checkout" id="checkout">结算订单</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 订单页面内容（默认隐藏） -->
    <div id="orderPage" style="display:none;">
        <div class="order-container">
            <div class="order-header">
                <h1>我的订单</h1>
                <a href="#" class="back-to-home" id="backToHome">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
            
            <div class="order-list" id="orderList">
                <!-- 订单将在这里动态生成 -->
            </div>
        </div>
    </div>
    
    <!-- 结算页面内容（默认隐藏） -->
    <div id="checkoutPage" style="display:none;">
        <div class="order-container">
            <div class="order-header">
                <h1>结算订单</h1>
                <a href="#" class="back-to-home" id="backToHomeFromCheckout">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>
            
            <div class="checkout-form" id="checkoutForm">
                <!-- 结算表单将在这里动态生成 -->
            </div>
        </div>
    </div>
    
    <script>
        // 购物车数据
        let cart = [];
        // 页面状态: 'home', 'orders', 'checkout'
        let currentPage = 'home';
        
        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 轮播图功能
            const slides = document.querySelector('.banner-slides');
            const indicators = document.querySelectorAll('.indicator');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');
            const slideCount = document.querySelectorAll('.banner-slide').length;
            let currentIndex = 0;
            let slideInterval;
            
            // 更新轮播位置
            function updateSlidePosition() {
                slides.style.transform = `translateX(-${currentIndex * 100}%)`;
                
                // 更新指示器状态
                indicators.forEach((indicator, index) => {
                    if (index === currentIndex) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            }
            
            // 下一张
            function nextSlide() {
                currentIndex = (currentIndex + 1) % slideCount;
                updateSlidePosition();
            }
            
            // 上一张
            function prevSlide() {
                currentIndex = (currentIndex - 1 + slideCount) % slideCount;
                updateSlidePosition();
            }
            
            // 开始自动轮播
            function startAutoSlide() {
                slideInterval = setInterval(nextSlide, 5000);
            }
            
            // 停止自动轮播
            function stopAutoSlide() {
                clearInterval(slideInterval);
            }
            
            // 事件监听
            prevBtn.addEventListener('click', () => {
                stopAutoSlide();
                prevSlide();
                startAutoSlide();
            });
            
            nextBtn.addEventListener('click', () => {
                stopAutoSlide();
                nextSlide();
                startAutoSlide();
            });
            
            // 指示器点击事件
            indicators.forEach(indicator => {
                indicator.addEventListener('click', () => {
                    const index = parseInt(indicator.getAttribute('data-index'));
                    currentIndex = index;
                    updateSlidePosition();
                    stopAutoSlide();
                    startAutoSlide();
                });
            });
            
            // 初始化轮播
            startAutoSlide();
            
            // 购物车功能
            const cartIcon = document.getElementById('cartIcon');
            const cartModal = document.getElementById('cartModal');
            const closeCart = document.getElementById('closeCart');
            const cartItems = document.getElementById('cartItems');
            const cartTotal = document.getElementById('cartTotal');
            const continueShopping = document.getElementById('continueShopping');
            const checkoutBtn = document.getElementById('checkout');
            const myOrdersLink = document.getElementById('myOrdersLink');
            const backToHome = document.getElementById('backToHome');
            const backToHomeFromCheckout = document.getElementById('backToHomeFromCheckout');
            const mainContent = document.getElementById('mainContent');
            const orderPage = document.getElementById('orderPage');
            const orderList = document.getElementById('orderList');
            const checkoutPage = document.getElementById('checkoutPage');
            const checkoutForm = document.getElementById('checkoutForm');
            
            // 从本地存储加载购物车
            function loadCart() {
                const savedCart = localStorage.getItem('freshCart');
                if (savedCart) {
                    cart = JSON.parse(savedCart);
                    updateCartUI();
                }
            }
            
            // 保存购物车到本地存储
            function saveCart() {
                localStorage.setItem('freshCart', JSON.stringify(cart));
            }
            
            // 更新购物车UI
            function updateCartUI() {
                // 更新购物车图标上的数量
                const cartBadge = document.querySelector('.cart-badge');
                const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
                cartBadge.textContent = totalItems;
                
                // 更新购物车弹窗内容
                cartItems.innerHTML = '';
                let totalPrice = 0;
                
                if (cart.length === 0) {
                    cartItems.innerHTML = '<p class="empty-cart">购物车是空的</p>';
                    cartTotal.textContent = '￥0.00';
                    return;
                }
                
                cart.forEach(item => {
                    const itemTotal = item.price * item.quantity;
                    totalPrice += itemTotal;
                    
                    const cartItem = document.createElement('div');
                    cartItem.className = 'cart-item';
                    cartItem.innerHTML = `
                        <div class="cart-item-img">
                            <img src="${item.image}" alt="${item.name}">
                        </div>
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">￥${item.price.toFixed(2)}</div>
                            <div class="cart-item-quantity">
                                <button class="quantity-btn decrease" data-id="${item.id}">-</button>
                                <input type="number" class="quantity-input" value="${item.quantity}" min="1" data-id="${item.id}">
                                <button class="quantity-btn increase" data-id="${item.id}">+</button>
                                <button class="remove-item" data-id="${item.id}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                    cartItems.appendChild(cartItem);
                });
                
                cartTotal.textContent = `￥${totalPrice.toFixed(2)}`;
                
                // 添加事件监听器到新添加的按钮
                document.querySelectorAll('.decrease').forEach(btn => {
                    btn.addEventListener('click', decreaseQuantity);
                });
                
                document.querySelectorAll('.increase').forEach(btn => {
                    btn.addEventListener('click', increaseQuantity);
                });
                
                document.querySelectorAll('.quantity-input').forEach(input => {
                    input.addEventListener('change', changeQuantity);
                });
                
                document.querySelectorAll('.remove-item').forEach(btn => {
                    btn.addEventListener('click', removeItem);
                });
            }
            
            // 添加商品到购物车
            function addToCart(id, name, price, image) {
                // 检查商品是否已在购物车
                const existingItem = cart.find(item => item.id === id);
                
                if (existingItem) {
                    existingItem.quantity += 1;
                } else {
                    cart.push({
                        id,
                        name,
                        price,
                        image,
                        quantity: 1
                    });
                }
                
                saveCart();
                updateCartUI();
                
                // 显示添加成功的反馈
                const addedItem = document.createElement('div');
                addedItem.className = 'added-feedback';
                addedItem.textContent = `已添加 ${name} 到购物车`;
                document.body.appendChild(addedItem);
                
                setTimeout(() => {
                    addedItem.remove();
                }, 2000);
            }
            
            // 减少商品数量
            function decreaseQuantity(e) {
                const id = e.target.dataset.id;
                const item = cart.find(item => item.id === id);
                
                if (item && item.quantity > 1) {
                    item.quantity -= 1;
                    saveCart();
                    updateCartUI();
                }
            }
            
            // 增加商品数量
            function increaseQuantity(e) {
                const id = e.target.dataset.id;
                const item = cart.find(item => item.id === id);
                
                if (item) {
                    item.quantity += 1;
                    saveCart();
                    updateCartUI();
                }
            }
            
            // 更改商品数量
            function changeQuantity(e) {
                const id = e.target.dataset.id;
                const newQuantity = parseInt(e.target.value);
                
                if (newQuantity > 0) {
                    const item = cart.find(item => item.id === id);
                    
                    if (item) {
                        item.quantity = newQuantity;
                        saveCart();
                        updateCartUI();
                    }
                } else {
                    // 如果输入无效，恢复原值
                    const item = cart.find(item => item.id === id);
                    e.target.value = item.quantity;
                }
            }
            
            // 移除商品
            function removeItem(e) {
                const id = e.target.closest('.remove-item').dataset.id;
                cart = cart.filter(item => item.id !== id);
                saveCart();
                updateCartUI();
            }
            
            // 显示订单页面
            function showOrdersPage() {
                mainContent.style.display = 'none';
                orderPage.style.display = 'block';
                checkoutPage.style.display = 'none';
                currentPage = 'orders';
                
                // 加载并显示订单
                loadAndDisplayOrders();
            }
            
// 修改loadAndDisplayOrders函数，添加删除按钮
function loadAndDisplayOrders() {
    const orders = JSON.parse(localStorage.getItem('freshOrders')) || [];
    orderList.innerHTML = '';
    
    if (orders.length === 0) {
        orderList.innerHTML = `
            <div class="empty-cart-message">
                <i class="fas fa-clipboard-list"></i>
                <p>您还没有任何订单</p>
            </div>
        `;
        return;
    }
    
    orders.forEach(order => {
        const orderElement = document.createElement('div');
        orderElement.className = 'order-card';
        
        // 格式化日期
        const formattedDate = new Date(order.date).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        orderElement.innerHTML = `
            <div class="order-summary">
                <div class="order-info">
                    <div class="order-id">订单号: ${order.orderId}</div>
                    <div class="order-date">下单时间: ${formattedDate}</div>
                </div>
            </div>
            <div class="order-details">
                <div class="order-items">
                    ${order.products.map(product => `
                        <div class="order-item">
                            <div class="order-item-img">
                                <img src="${product.image}" alt="${product.name}">
                            </div>
                            <div class="order-item-info">
                                <div class="order-item-name">${product.name}</div>
                                <div class="order-item-price">￥${product.price.toFixed(2)} × ${product.quantity}</div>
                            </div>
                        </div>
                    `).join('')}
                </div>
                <div class="order-total">
                    <span>订单总额:</span>
                    <span>￥${order.total.toFixed(2)}</span>
                </div>
                <button class="delete-order-btn" data-order-id="${order.orderId}">
                    <i class="fas fa-trash"></i> 删除订单
                </button>
            </div>
        `;
        
        orderList.appendChild(orderElement);
    });
    
    // 为删除按钮添加事件监听
    document.querySelectorAll('.delete-order-btn').forEach(btn => {
        btn.addEventListener('click', deleteOrder);
    });
}

// 添加删除订单函数
function deleteOrder(e) {
    const orderId = e.target.closest('.delete-order-btn').dataset.orderId;
    const orders = JSON.parse(localStorage.getItem('freshOrders')) || [];
    
    // 找到要删除的订单
    const orderToDelete = orders.find(order => order.orderId === orderId);
    
    if (orderToDelete) {
        // 弹出确认对话框
        const confirmDelete = confirm(`确定要删除订单 ${orderId} 吗？`);
        
        if (confirmDelete) {
            // 从数组中删除该订单
            const updatedOrders = orders.filter(order => order.orderId !== orderId);
            // 更新localStorage
            localStorage.setItem('freshOrders', JSON.stringify(updatedOrders));
            // 重新加载订单列表
            loadAndDisplayOrders();
        }
    }
}

// 添加删除订单按钮的样式
const style = document.createElement('style');
style.textContent = `
    .delete-order-btn {
        background: #e4393c;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.3s;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .delete-order-btn:hover {
        background: #c62b2e;
    }
    
    .delete-order-btn i {
        margin-right: 5px;
    }
`;
document.head.appendChild(style);

            
            // 显示结算页面
            function showCheckoutPage() {
                if (cart.length === 0) {
                    alert('购物车是空的，请先添加商品');
                    return;
                }
                
                mainContent.style.display = 'none';
                orderPage.style.display = 'none';
                checkoutPage.style.display = 'block';
                currentPage = 'checkout';
                
                // 构建结算表单
                renderCheckoutForm();
            }
            
            // 渲染结算表单
            function renderCheckoutForm() {
                // 计算总金额
                const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                
                checkoutForm.innerHTML = `
                    <div class="form-section">
                        <h2>收货信息</h2>
                        <div class="form-group">
                            <label for="name">收货人姓名</label>
                            <input type="text" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号码</label>
                            <input type="tel" id="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="address">收货地址</label>
                            <textarea id="address" required></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="province">省份</label>
                                <select id="province" required>
                                    <option value="">请选择省份</option>
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="广东">广东</option>
                                    <option value="江苏">江苏</option>
                                    <option value="浙江">浙江</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="city">城市</label>
                                <select id="city" required>
                                    <option value="">请选择城市</option>
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="广州">广州</option>
                                    <option value="深圳">深圳</option>
                                    <option value="杭州">杭州</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h2>订单信息</h2>
                        <div class="cart-items">
                            ${cart.map(item => `
                                <div class="cart-item">
                                    <div class="cart-item-img">
                                        <img src="${item.image}" alt="${item.name}">
                                    </div>
                                    <div class="cart-item-info">
                                        <div class="cart-item-name">${item.name}</div>
                                        <div class="cart-item-price">￥${item.price.toFixed(2)} × ${item.quantity}</div>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                        <div class="cart-total">
                            <span>总计:</span>
                            <span>￥${total.toFixed(2)}</span>
                        </div>
                        <button class="submit-btn" id="submitOrder">提交订单</button>
                    </div>
                `;
                
                // 添加提交订单事件监听
                document.getElementById('submitOrder').addEventListener('click', submitOrder);
            }
            
            // 提交订单
            function submitOrder() {
                // 获取表单数据
                const name = document.getElementById('name').value;
                const phone = document.getElementById('phone').value;
                const address = document.getElementById('address').value;
                const province = document.getElementById('province').value;
                const city = document.getElementById('city').value;
                
                // 简单验证
                if (!name || !phone || !address || !province || !city) {
                    alert('请填写完整的收货信息');
                    return;
                }
                
                // 生成订单数据
                const order = {
                    orderId: 'DD' + Date.now(),
                    date: new Date().toISOString(),
                    status: 'pending',
                    products: [...cart],
                    total: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0),
                    shippingInfo: {
                        name,
                        phone,
                        address: `${province}${city}${address}`
                    }
                };
                
                // 保存订单
                let orders = JSON.parse(localStorage.getItem('freshOrders')) || [];
                orders.push(order);
                localStorage.setItem('freshOrders', JSON.stringify(orders));
                
                // 清空购物车
                cart = [];
                saveCart();
                updateCartUI();
                
                // 返回首页
                showHomePage();
                
                // 提示用户
                alert('订单提交成功！请前往"我的订单"页面查看');
            }
            
            // 显示首页
            function showHomePage() {
                mainContent.style.display = 'block';
                orderPage.style.display = 'none';
                checkoutPage.style.display = 'none';
                currentPage = 'home';
            }
            
            // 事件监听器
            document.querySelectorAll('.add-to-order').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const id = this.dataset.id;
                    const name = this.dataset.name;
                    const price = parseFloat(this.dataset.price);
                    const image = this.dataset.image;
                    
                    addToCart(id, name, price, image);
                });
            });
            
            cartIcon.addEventListener('click', () => {
                cartModal.style.display = 'flex';
            });
            
            closeCart.addEventListener('click', () => {
                cartModal.style.display = 'none';
            });
            
            continueShopping.addEventListener('click', () => {
                cartModal.style.display = 'none';
            });
            
            checkoutBtn.addEventListener('click', () => {
                cartModal.style.display = 'none';
                showCheckoutPage();
            });
            
            myOrdersLink.addEventListener('click', (e) => {
                e.preventDefault();
                showOrdersPage();
            });
            
            backToHome.addEventListener('click', (e) => {
                e.preventDefault();
                showHomePage();
            });
            
            backToHomeFromCheckout.addEventListener('click', (e) => {
                e.preventDefault();
                showHomePage();
            });
            
            // 点击购物车外部关闭弹窗
            cartModal.addEventListener('click', (e) => {
                if (e.target === cartModal) {
                    cartModal.style.display = 'none';
                }
            });
            
            // 初始化
            loadCart();
            updateCartUI();
        });
    </script>
</body>
</html>